<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">加载动画</view>
		</w-navbar>
		<w-loading ref="loading" :color="loadingColor" :type="loadingType"/>
		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="m-b-2">
				<w-button type="primary" @click="showLoading('sonicWave','#f2f2f2')">加载样式一</w-button>
			</view>
			<view class="m-b-2">
				<w-button type="primary" @click="showLoading('flipBlocks','#f2f2f2')">加载样式二</w-button>
			</view>
			<view class="m-b-2">
				<w-button type="primary" @click="showLoading('zoomCircle','#f2f2f2')">加载样式三</w-button>
			</view>
			<view class="m-b-2">
				<w-button type="primary" @click="showLoading('transverseCircle','#f2f2f2')">加载样式四</w-button>
			</view>
			<view class="m-b-2">
				<w-button type="primary" @click="showLoading('rotateCircles','#f2f2f2')">加载样式五</w-button>
			</view>
		</pageDemoBlock>
		<pageDemoBlock title="自定义颜色" color="#e45355">
			<view class="m-b-2">
				<w-button type="primary" @click="showLoading('sonicWave','#85F2EF')">自定义颜色</w-button>
			</view>
		</pageDemoBlock>
	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				loadingType:'rotateCircles',
				loadingColor:'#f2f2f2'
			};
		},
		methods:{
			showLoading(type,color){
				this.loadingType = type
				this.loadingColor = color
				this.$refs.loading.showLoading()
				setTimeout(()=>{
					this.$refs.loading.hiddLoading()
				},3000)
			}
		}
		
	}
</script>

<style lang="scss" scoped>

</style>
